<template>
  <div class="h-4">【云端报警风险】</div>
  <div ref="target" class="w-full flex-1"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});

let target = ref(null);
let myChart = null;

watch(
  () => props.data,
  () => {
    renderChart();
  }
);

onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});

const renderChart = () => {
  const options = {
    // radar代表雷达图的坐标系设置
    radar: {
      nameGap: 15,
      // splitNumber: 2, // 从中心点到最外圈分的层数
      // 配置名称样式
      name: {
        textStyle: {
          color: '#05d5ff',
          fontSize: 14,
        },
      },
      // 形状 polygon是多边形， circle是圆形
      shape: 'polygon',
      // 居中位置 是图形相对于整个框的位置
      center: ['50%', '50%'],
      ridius: '80%',
      startAngle: 120, // 起始角度 整个图形的旋转角度，正往左旋转
      // 轴线配置 从圆心点往四周走的线的样式
      axisLine: {
        lineStyle: {
          width: 1, // 线的宽度
          color: 'rgba(5, 213, 255, 0.8)',
          cap: 'round',
          // join: 'bevel',
        },
        // symbol: ['none', 'arrow'], //箭头 symbol是符号的意思
        // 坐标轴刻度相关设置
        axisTick: {
          show: true,
          length: 10,
        },
      },
      // 网格线
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: 'rgba(5, 213, 255, 0.8)',
        },
      },
      // 指示器文字， 就是name
      indicator: props.data.map((item) => ({
        name: item.name,
        max: 120,
      })),
      // 不去拆分区域
      splitArea: {
        show: false,
      },
    },
    // 坐标极点
    polar: {
      center: ['50%', '50%'],
      radius: '0%',
    },
    // 坐标角度
    angleAxis: {
      min: 0,
      interval: 5, // 间隔
      clockwise: false,
    },
    // 径向轴
    radiusAxis: {
      min: 0,
      interval: 20,
      splitLine: {
        show: false,
      },
    },
    // 核心配置, 只有一个图标时，可以写对象，多个就写数组
    series: {
      type: 'radar',
      symbol: 'circle',
      symbolSize: 10, // 拐角大小
      itemStyle: {
        normal: {
          color: '#05d5ff',
        },
      },
      areaStyle: {
        normal: {
          color: '#05d5ff',
          opacity: 0.5,
        },
      },
      // 线条颜色
      lineStyle: {
        width: 2,
        color: '#05d5ff',
      },
      label: {
        normal: {
          show: true,
          color: '#fff',
        },
      },
      data: [
        {
          value: props.data.map((item) => item.value),
        },
      ],
    },
  };
  myChart.setOption(options);
};
</script>
<style lang="scss" scoped></style>
